<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="bundle.js"></script>
		<script type="text/javascript">
			class Tab{
				constructor(){
				   this.aBtn = document.querySelectorAll('.tab input');
			       this.aList = document.querySelectorAll('.tab li');
				}
				
				show() {
					var _this = this;
					for(let i = 0; i < this.aBtn.length; i++) {
						this.aBtn[i].onclick = function() {
							_this.fn(i);
						}
					}
				}
				fn(i) {

					for(var j = 0; j <this.aList.length; j++) {
						this.aBtn[j].className = '';
						this.aList[j].className = '';
					}
					this.aList[i].className = 'show';
					this.aBtn[i].className = 'active';
				}
			}
			window.onload = function() {
				var n = new Tab();
				n.show();
			}						
		</script>
	</head>

	<body>
		<div class="tab">
				<input type="button" value="1" class="active" />
				<input type="button" value="2" />
				<input type="button" value="3" />

			<ul>
				<li class="show">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
		<button class="l_left">左</button>
		<button class="r_rigth">右</button>
	</body>

</html>